<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>星空</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      overflow: hidden;
    }

    html,
    body {
      width: 100%;
      height: 100%;
    }

    body {
      background: linear-gradient(to bottom, #000 0%, #5788fe 100%);

    }

    .landscape {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: url(./bg.jpg);
      background-size: cover;
      background-repeat: no-repeat;
      z-index: -1;
    }

    .filter {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
      background: #fa7575;
      animation: colorChange 30s ease-in infinite;
    }

    /* 渐变动画*/
    @keyframes colorChange {

      0%,
      100% {
        opacity: 0;
      }

      50% {
        opacity: 0.7;
      }

    }
  </style>
</head>

<body>
  <div class="landscape">
  </div>
  <canvas id="canvas"></canvas>
  <div class="filter"></div>
</body>

<script>
  document.addEventListener('DOMContentLoaded', init)

  function init() {
    const queryString = window.location.search;
    // 解析查询参数字符串
    const params = new URLSearchParams(queryString);
    // 在控制台中输出参数值
    const id = params.get('id')
    console.log('id', id);
  }

</script>
<script>
  //创建星星的函数
  function RoundItem(index, x, y, ctx) {
    this.index = index
    this.x = x
    this.y = y
    this.ctx = ctx
    this.r = Math.random() * 2 + 1
    this.color = 'rgba(255,255,255,1)'
  }
  // 绘制
  RoundItem.prototype.draw = function () {
    this.ctx.fillStyle = this.color //指定颜色
    this.ctx.beginPath() // 开始绘制
    this.ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false) // 绘制圆形
    this.ctx.closePath() // 结束绘制
    this.ctx.fill() //填充形状
  }
  //移动
  RoundItem.prototype.move = function () {
    this.y -= 0.5
    if (this.y < 0) {
      this.y = HEIGHT
    }
    this.draw()
  }


  let canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d'),
    round = [],
    initRoundPopulation = 100; //星星的个数

  const WIDTH = document.documentElement.clientWidth,
    HEIGHT = document.documentElement.clientHeight;

  canvas.width = WIDTH
  canvas.height = HEIGHT

  init()
  animate()
  function init() {
    for (var i = 0; i < initRoundPopulation; i++) {
      round[i] = new RoundItem(i, Math.random() * WIDTH, Math.random() * HEIGHT, ctx)
      round[i].draw()
    }
  }
  function animate() {
    ctx.clearRect(0, 0, WIDTH, HEIGHT) //清除画布
    for (let star of round) {
      star.move()
    }
    requestAnimationFrame(animate) //通过刷新帧数来调用函数
  }


</script>

</html>